{% extends '_base_create_update.html' %}

{% block top_css %}
    {{ super() }}

    <!--Treeview-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/bootstrap-treeview/css/bootstrap-treeview.min.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

    <style>

        .step {
            width: 33.33%;
            float: left;
        }

        .screen {
            height: 360px;
            background-color: #000;
            padding: 15px;
            overflow-y: auto;
        }

    </style>

{% endblock %}


<!-- Content head -->
{% block head_title %}
    代码发布
{% endblock %}

{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">代码发布</a></li>
        <li class="active">任务工单</li>
    </ol>
{% endblock %}

<!-- Content body -->
{% block tip %}
    <div class="alert alert-info mar-no">
        <i class="fa fa-circle"></i>&nbsp;&nbsp;项目开始部署后请不要离开该页面，直到上线成功后方可离开该页面。
    </div>
{% endblock %}

{% block body_title %}
    部署任务工单
{% endblock %}

{% block body_form %}
    <div class="panel-body">
        <div class="col-lg-12">
           <div class="panel pad-no">
                <div id="cir-wz">
                    <div class="wz-heading pad-ver">

                        <!--Progress bar-->
                        <div class="progress progress-xs progress-light-base">
                            <div class="progress-bar progress-bar-primary"></div>
                        </div>

                        <!--Nav-->
                        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                        <ul class="wz-nav-off">
                            <li class="step">
                                <a data-toggle="tab" href="#cir-tab1" title="初始化" class="add-tooltip">
                                    <div class="icon-wrap bg-primary">
                                        <i class="wz-icon fa fa-lemon-o fa-lg"></i>
                                        <i class="wz-icon-done fa fa-thumbs-o-up fa-lg"></i>
                                    </div>
                                </a>
                            </li>
                            <li class="step">
                                <a data-toggle="tab" href="#cir-tab2" title="代码开始回滚" class="add-tooltip">
                                    <div class="icon-wrap bg-primary">
                                         <i class="wz-icon fa fa-long-arrow-right fa-lg"></i>
                                        <i class="wz-icon-done fa fa-thumbs-o-up fa-lg"></i>
                                    </div>
                                </a>
                            </li>

                            <li class="step">
                                <a data-toggle="tab" href="#cir-tab3" title="代码回滚成功" class="add-tooltip">
                                    <div class="icon-wrap bg-primary">
                                        <i class="wz-icon fa fa-ge fa-lg"></i>
                                        <i class="wz-icon-done fa fa-thumbs-o-up fa-lg"></i>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!--Form-->
                    <form class="form-horizontal">
                        <div class="panel-body">
                            <div class="tab-content">

                                <!--First tab-->
                                <div id="cir-tab1" class="tab-pane mar-btm text-center">
                                    <h5>初始化</h5>
                                    <p></p>
                                </div>

                                <!--Second tab-->
                                <div id="cir-tab2" class="tab-pane mar-btm text-center">
                                    <h5>代码回滚任务</h5>
                                    <p>当代码上出现未知的问题，可以通过快速回滚到上一个版本 </p>
                                </div>

                                <!--Eighth tab-->
                                <div id="cir-tab3" class="tab-pane mar-btm text-center">
                                    <h5>回滚成功</h5>
                                    <p>恭喜你，代码回滚成功！</p>
                                </div>

                            </div>
                        </div>

                        <!--Footer button-->
                        <div class="panel-footer text-right">
                            <div class="box-inline hidden">
                                <button type="button" class="previous btn btn-primary">上一步</button>
                                <button type="button" class="next btn btn-primary">下一步</button>
                                <button type="button" class="finish btn btn-warning" disabled>完成</button>
                            </div>
                            <div class="box-inline">
                                <button id="rollback" type="button" class="btn btn-primary">快速回滚</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="panel pad-no">
                <div class="screen">
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>
    <!--bootstrap-wizard-->
    <script src="{{ url_for('static', filename='plugins/bootstrap-wizard/jquery.bootstrap.wizard.js') }}"></script>
    <!--socket-io-->
    <script type="text/javascript" src="{{ url_for('static', filename='js/socket.io.js') }}"></script>

    <script type="text/javascript">

        function initWizard() {
            $('#cir-wz').bootstrapWizard({
                tabClass		    : 'wz-steps',
                nextSelector	    : '.next',
                previousSelector    : '.previous',
                onTabClick: function(tab, navigation, index) {
                    return false;
                },
                onInit : function(){
                    $('#cir-wz').find('.finish').hide().prop('disabled', true);
                },
                onTabShow: function(tab, navigation, index) {
                    var $total = navigation.find('li').length;
                    var $current = index+1;
                    var $percent = (index/$total) * 100;
                    var margin = (100/$total)/2;
                    $('#cir-wz').find('.progress-bar').css({width:$percent+'%', 'margin': 0 + 'px ' + margin + '%'});

                    navigation.find('li:eq('+index+') a').trigger('focus');


                    // If it's the last tab then hide the last button and show the finish instead
                    if($current >= $total) {
                        $('#cir-wz').find('.next').hide();
                        $('#cir-wz').find('.finish').show();
                        $('#cir-wz').find('.finish').prop('disabled', false);
                    } else {
                        $('#cir-wz').find('.next').show();
                        $('#cir-wz').find('.finish').hide().prop('disabled', true);
                    }
                },
                onNext: function () {

                }
            })
        }

        function rollback() {
            var url = window.location.protocol === "https:" ? "wss://" : "ws://" + document.domain + ':' + location.port;
            var socket = io.connect(url + '/codes');
            socket.on('connect', function () {
                socket.emit('open', {
                    task_id: '{{ task_id }}'
                });
            });

            socket.on('close', function () {
                console.log('socket close!');
                socket.close();
            });

            socket.on('construct', function () {
                console.log('socket construct!');
                socket.emit('rollback');
            });

            socket.on('rollback', function (result) {
                if(result.event == 'error'){
                    bees.tipError({
                         message : result.data
                    });
                    socket.close();
                }else {
                    bees.tipSuccess({
                         message : result.data
                    });
                    socket.close();
                }
            });

            socket.on('step', function (result) {
                console.log('socket step!');
                if(result.sequence>1 && result.sequence<=8){
                    $(".next").trigger('click');
                    if(result.sequence == 5){
                        $(".screen").append('<p class="text-bold text-warning">代码回滚操作</p>');
                    }
                }
            });

            socket.on('info', function (result) {
                console.log('socket info!');
                $(".screen").append('<p>'+result.message+'</p>');
            });

            socket.on('error', function (result) {
                console.log('socket error!');
                $(".screen").append('<p class="text-danger">'+result.message+'</p>');
            });


            socket.on('pong', function () {
                console.log('socket pong!');
            });
        }

        $(function () {
            initWizard();

            $("#rollback").on('click', function () {
                $(this).attr("disabled", true);
                rollback();
            })

        });
    </script>

{% endblock %}
